<template>
	<view class="app-i-search" :style="[searchViewStyle]">
		<view class="app-i-search__body e-rela e-flex" :class="[layoutClass]" :style="[layoutStyle]">
			<text class="iconfont icon-sousuo e-m-r-20 e-font-28" :style="[{ color: option.iconColor }]"></text>
			<swiper circular autoplay vertical class="app-i-search__body-swiper e-flex-1">
				<swiper-item>
					<view class="app-i-search__body-swiper__item e-flex">
						<text class="e-font-26" :style="[{ color: option.textColor }]">{{ $t('layout.请输入关键词') }}</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="app-i-search__body-swiper__item e-flex">
						<text class="e-font-26" :style="[{ color: option.textColor }]">{{ $t('layout.请输入关键词') }}</text>
					</view>
				</swiper-item>
			</swiper>
			<view class="app-i-search__body-mask" @tap="$goTo('/pages/classify/search/index')"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { GET_MENU_HEIGHT } from '@/env';
import { useCurrentInstance } from '@/common/hooks';
import { useLayoutCompoments } from './hooks';

const props = withDefaults(
	defineProps<{
		hasCustomNavigation?: boolean;
		option: {
			//样式风格
			styleType: 0 | 1 | 2;
			// 1商品2商户
			searchType: number[];
			//文字位置left居左 center居中
			textAlign: 'left' | 'center';
			//底色背景
			backgroundColor: string;
			//组件背景
			bodyBackgroundColor: string;
			//图标颜色
			iconColor: string;
			//文字颜色
			textColor: string;
			// 边距
			paddingTop: number;
			paddingBottom: number;
			paddingX: number;
			// 圆角
			radiusTop: number;
			radiusBottom: number;
		};
	}>(),
	{
		option: () => ({
			styleType: 0,
			searchType: [1],
			textAlign: 'left',
			backgroundColor: 'rgba(245, 246, 249, 1)',
			bodyBackgroundColor: 'rgba(255, 255, 255, 1)',
			iconColor: 'rgba(245, 34, 45, 1)',
			textColor: 'rgba(48, 49, 51, 1)',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0
		})
	}
);

const emit = defineEmits(['setPagePaddingTop']);

const ctx = useCurrentInstance();

const { bodyClass, bodyBoxStyle: layoutStyle } = useLayoutCompoments(ctx, props.option);

const searchViewStyle = computed(() => {
	// #ifdef  MP-WEIXIN||MP-ALIPAY
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {};
	// #endif
	let top: string | number = 0;
	// #ifdef  H5
	top = props.hasCustomNavigation ? 0 : 0;
	// #endif
	// #ifdef  MP-WEIXIN||MP-ALIPAY
	top = props.hasCustomNavigation ? `${GET_MENU_HEIGHT(menuButtonInfo)}px` : 0;
	// #endif

	return {
		top,
		backgroundColor: props.option.backgroundColor,
		padding: `${props.option.paddingTop}px ${props.option.paddingX}px ${props.option.paddingBottom}px ${props.option.paddingX}px`
	};
});

const layoutClass = computed(() => {
	return [bodyClass.value, props.option.textAlign == 'center' ? 'text-center' : ''];
});

// const swiperStyle = computed(() => {
// 	return {
// 		backgroundColor: props.option.bodyBackgroundColor
// 	}
// })

let paddingTop = 36;
if (props.option.paddingTop) {
	paddingTop += props.option.paddingTop;
}
if (props.option.paddingBottom) {
	paddingTop += props.option.paddingBottom;
}
emit('setPagePaddingTop', paddingTop);
</script>

<style scoped lang="scss">
@import '@/components/list/css/layoutCommon.scss';
@include appBem_b(i-search) {
	position: sticky;
	left: 0;
	right: 0;
	z-index: $z-index-high;
	@include appBem_e(body) {
		padding: 0 20rpx;
		height: 36px;
		overflow: hidden;
		&-swiper {
			height: 36px;

			&__item {
				height: 36px;
				line-height: 36px;
			}
		}
		&-mask{
			@include absolute-full
		}
	}
}
</style>
